<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style3.css">
    <link href="/css/boxicons.min.css" rel="stylesheet">
    <script src="js/anime.min.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .header {
                width: 100%;
                height: 180px;
                background-color: #e6e5e5;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 500px;
                background-color: #e6e5e5;
            }

            .header_list {
                background-color: black;
            }

            .bigimg {
                height: 378px;
            }

            .foot {
                width: 100%;
            }

        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px) {
            .header {
                width: 100%;
                height: 185px;
                background-color: black;
                border-radius: 10%;
            }

            .nav .search input {
                width: 650px;
                height: 40px;
            }

            .nav .search button {
                width: 60px;
                height: 40px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 1016px;
                background-color: #e6e5e5;
                padding-top: 80px;
            }

            ._list {
                height: 865px;
            }

            .header_list {
                background-color: black;
            }

            .bigimg {
                height: 779px;
            }

            .foot {
                width: 100%;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .header {
                width: 100%;
                height: 85px;
                background-color: rgb(49, 49, 50);
            }
        }
    </style>
</head>

<body style="background-color: black;">
    <div>
        <div class="header">
            <a href="#">
                <div class="header_list">
                    <div class="list_info">
                        <div class="listinfo_bottom">
                            <div>
                                <img src="./images/头像.png" />
                                <span>w</span>
                            </div>
                            </br>
                            <div>
                                <span>关注 0 粉丝 0</span>
                            </div>
                        </div>
                    </div>
                    <div class="list_info">
                        <div><span style="color: red; font-size: 22px;">作者简介：</span></div>
                        <div><span>插画师，建模师，AI创作爱好者，擅长各种艺术作品创作。</span></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="list">
            <a class="toDetails" href="./details.html?id=15">
                <div class="_list">
                    <div class="list_img">
                        <img class="bigimg" src="./images/夜郎竹王像.jpg" />
                    </div>
                    <div class="list_info">
                        <div>
                            <span style="font-size: 17px;font-weight: 700;color: orange;" class="spanName">夜郎竹王像</span>
                            <i class="iconfont icon-anquanrenzheng1" style="color:green;"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <!-- 底部导航栏 -->
        <div class="foot">
            <div class="navbar">
                <!-- <div class="effect"></div> -->
                <a href="#">
                    <button class="active">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </button>
                </a>
                <a href="./blindbox.html">
                    <button>
                        <i class="iconfont icon-manghe"></i>
                        <p>盲盒</p>
                    </button>
                </a>
                <a href="./home.html">
                    <button>
                        <i class="iconfont icon-wode"></i>
                        <p>我的</p>
                    </button>
                </a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var loc = window.location.href;
            var param = loc.split("?")[1];
            var paramList = param.split("&");
            var key, val;
            for (index in paramList) {
                key = paramList[index].split("=")[0];
                val = paramList[index].split("=")[1];
                val = decodeURI(val, "UTF8");
                if (val == '1') {
                    $('.bigimg').attr("src", "./images/夜郎王·多筒.png");
                    $('.toDetails').attr("href", "./details.html?id=1");
                    $('.spanName').text("夜郎王·多筒");
                }
                if (val == '2') {
                    $('.bigimg').attr("src", "./images/女王1.png");
                    $('.spanName').text("女王");
                    $('.toDetails').attr("href", "./details.html?id=2");
                }
                if (val == '3') {
                    $('.bigimg').attr("src", "./images/二大王·上峒叉星蛮王 (2).jpg");
                    $('.spanName').text("二大王·上峒叉星蛮王");
                    $('.toDetails').attr("href", "./details.html?id=3");
                }
                if (val == '4') {
                    $('.bigimg').attr("src", "./images/三大王·中峒蛇星蛮王.jpg");
                    $('.spanName').text("三大王·中峒蛇星蛮王");
                    $('.toDetails').attr("href", "./details.html?id=4");
                }
                if (val == '5') {
                    $('.bigimg').attr("src", "./images/四大王·下峒獐星蛮王.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("四大王·下峒獐星蛮王");
                    $('.toDetails').attr("href", "./details.html?id=5");
                }
                if (val == '6') {
                    $('.bigimg').attr("src", "./images/古国遗珍.png");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("古国遗珍王");
                    $('.toDetails').attr("href", "./details.html?id=6");
                }
                if (val == '7') {
                    $('.bigimg').attr("src", "./images/静谧殿.png");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("静谧殿");
                    $('.toDetails').attr("href", "./details.html?id=7");
                }
                if (val == '8') {
                    $('.bigimg').attr("src", "./images/青瓦之宫.png");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("青瓦之宫");
                    $('.toDetails').attr("href", "./details.html?id=8");
                }
                if (val == '9') {
                    $('.bigimg').attr("src", "./images/夜郎民族图腾崇拜和权力的象征——铜虎.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("夜郎民族图腾崇拜和权力的象征——铜虎");
                    $('.toDetails').attr("href", "./details.html?id=9");
                }
                if (val == '10') {
                    $('.bigimg').attr("src", "./images/龙里巫山岩画“夜郎武士”.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("龙里巫山岩画“夜郎武士”");
                    $('.toDetails').attr("href", "./details.html?id=10");
                }
                if (val == '11') {
                    $('.bigimg').attr("src", "./images/盘县大洞旧石器时代遗址.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("盘县大洞旧石器时代遗址");
                    $('.toDetails').attr("href", "./details.html?id=11");
                }
                if (val == '12') {
                    $('.bigimg').attr("src", "./images/民间布艺中的夜郎神话.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("民间布艺中的夜郎神话");
                    $('.toDetails').attr("href", "./details.html?id=12");
                }
                if (val == '13') {
                    $('.bigimg').attr("src", "./images/夜郎文物 陶罐.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("夜郎文物:陶罐");
                    $('.toDetails').attr("href", "./details.html?id=13");
                }
                if (val == '14') {
                    $('.bigimg').attr("src", "./images/竹王面具.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("竹王面具");
                    $('.toDetails').attr("href", "./details.html?id=14");
                }
                if (val == '15') {
                    $('.bigimg').attr("src", "./images/夜郎竹王像.jpg");
                    $('.bigimg').attr("height", "378px");
                    $('.spanName').text("夜郎竹王像");
                    $('.toDetails').attr("href", "./details.html?id=15");
                }
            }
        });
    </script>
</body>

</html>